<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-tooltip effect="dark" content="刷新" placement="top" :enterable="false">
                        <el-button type="primary" size="small" :icon="icon" @click="getCarouselInfo"></el-button>
                    </el-tooltip>
                    <el-button type="primary" size="small" @click="uploadTarget">上传
                    </el-button>
                </el-col>
            </el-row>
            <el-table :data="carouselData"
                      ref="table"
                      border
                      style="width: 100%">
                <el-table-column
                        prop="title"
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="图片">
                    <template slot-scope="scope">
                        <el-popover
                                placement="right"
                                trigger="hover">
                            <img :src="scope.row.path"/>
                            <img slot="reference" :src="scope.row.path"  style="max-height: 50px;max-width: 150px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="size"
                        label="名称(kb)">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
           
        </el-card>
        <!-- 上传 -->
        <el-dialog title="上传文件"
                   :visible.sync="syncDialogVisible"
                   width="50%">
            <el-upload
                    ref="img"
                    class="upload-demo"
                    :headers="upload.headers"
                    :accept="upload.accept"
                    :action="upload.url"
                    :beforeUpload="beforeAvatarUploadPdf"
                    :on-success="handleSuccess">
                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传 jpg/png 文件，且不超过 2MB
                    </div>
                </template>
            </el-upload>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="上传文件"
                   :visible.sync="syncEditDialogVisible"
                   width="50%">
            <img :src="edit_path" style="max-height: 150px;max-width: 150px" />
            <el-upload
                    ref="edit_img"
                    class="upload-demo"
                    :headers="upload.headers"
                    :accept="upload.accept"
                    :action="upload.url"
                    :beforeUpload="beforeAvatarUploadPdf"
                    :on-success="handleEditSuccess">
                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传 jpg/png 文件，且不超过 2MB
                    </div>
                </template>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "index",
    data(){
        return{
            icon: 'el-icon-refresh',
            syncDialogVisible:false,
            syncEditDialogVisible:false,
            upload:{
                url:this.$action_url + 'admin/upload_target',
                name: 'file',
                accept:'image/*',
                headers:{
                    authorization:window.sessionStorage.getItem('token')
                }
            },
            queryInfo:{
                limit: this.$global_limit,
                page: this.$global_page
            },
            total:0,
            carouselData:[],
            edit_id:0,
            edit_path:''
        }
    },
    created() {
        this.getCarouselInfo()
    },
    methods:{
        async getCarouselInfo(){
            const {data: res} = await this.$http.get('admin/get_carousel_list', {params: this.queryInfo})
            if (res.code !== 200) return this.$message.error('获取失败')
            this.carouselData = res.data.list
            this.total = res.data.totalCount
        },
        uploadTarget(){
            this.syncDialogVisible = true
        },
        beforeAvatarUploadPdf(file){
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            // const extension = testmsg === 'pdf' ||  testmsg === 'PDF';
            const extension = testmsg === 'png' ||  testmsg === 'jpg';
            const isLt50M = file.size / 1024 / 1024 < 2
            if(!extension ) {
                this.$message({
                    message: '上传文件只能是.png或.jpg格式!',
                    type: 'error'
                });
                return false;//必须加上return false; 才能阻止
            }
            if(!isLt50M) {
                this.$message({
                    message: '上传文件大小不能超过 2MB!',
                    type: 'error'
                });
                return false;
            }
            return extension ||  isLt50M
        },
        async handleSuccess(response,file){
            if (response.code !== 200) return this.$message.error(response.data.message)
            const picInfo = {
                path: this.$action_url + 'storage/' + response.data.list.path,
                title: file.name,
                size:file.size,
                type:file.raw.type
            }
            const {data: res} = await this.$http.post('admin/save_carousel', picInfo)
            if (res.code !== 200) return this.$message.error("保存文件失败")
            this.syncDialogVisible = false
            this.$refs.img.clearFiles()
            //刷新表格
            await this.getCarouselInfo()
        },
        async handleEditSuccess(response,file){
            if (response.code !== 200) return this.$message.error(response.data.message)
            const picInfo = {
                id:this.edit_id,
                path: this.$action_url + 'storage/' + response.data.list.path,
                title: file.name,
                size:file.size,
                type:file.raw.type
            }
            const {data: res} = await this.$http.post('admin/save_carousel', picInfo)
            if (res.code !== 200) return this.$message.error("保存文件失败")
            this.syncEditDialogVisible = false
            this.$refs.edit_img.clearFiles()
            //刷新表格
            await this.getCarouselInfo()
        },
        editDialog(row){
            this.edit_id = row.id
            this.edit_path = row.path
            this.syncEditDialogVisible = true
        },
        async del(id){
            const configResult = await this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);
            if (configResult !== 'confirm') return this.$message.info('已取消删除')
            const {data: result} = await this.$http.delete('admin/carousel_del/' + id)
            if (result.code !== 200) return this.$message.error(result.data.message)
            this.$message.success('删除成功')
            await this.getCarouselInfo();
        }
    }
}
</script>

<style scoped>

</style>
